<template>
  <div class="recharge">
    <div class="container">
      <div>
        <el-link type="warning"><span>模拟充值</span></el-link>
      </div>
      <div class="fanan">
        <div class="recharge1">
          <p>方案1.充值1元 送1000元</p>
          <el-button size="large" type="danger" loading>充值</el-button>
        </div>
        <div class="recharge2">
          <p>方案2.充值10元 送100元</p>
          <el-button size="large" type="danger" loading>充值</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

</script>

<style scoped lang="scss">
  .recharge {
    .container {
      div:nth-of-type(1) {
        border-bottom: 1px solid gainsboro;
        span {
          font-size: 20px;
          display: block;
          padding: 10px 0;
        }
      }
      .fanan {
        display: flex;
        justify-content: space-evenly;
        .recharge1,.recharge2 {
          margin-top: 50px;
          width: 300px;
          height: 200px;
          text-align: center;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          border-radius: 10px;
          box-shadow: rgba(0,0,0,0.2) 0px 4px 8px 0px, rgba(0,0,0,0.2) 0px 6px 20px 0px;
          background: url("http://lixinghe.meimeng.eu.org/flower/image/rechage.jfif");
          background-size: cover;
          p {
            color: white;
            font-weight: bolder;
          }
        }
      }
    }
  }
</style>
